<template>
	<div class="test-page">
		<a-card title="试题页面" style="width: 100%;">
			<a-collapse v-model:activeKey="activeKeys">
				<a-collapse-panel key="1" header="文章与问题">
					<div v-for="(section, sectionIndex) in sections" :key="sectionIndex" style="margin-bottom: 30px;">
						<h3>文章 {{ sectionIndex + 1 }}</h3>
						<p style="white-space: pre-wrap;">{{ section.article.content }}</p>
						<div v-for="(question, questionIndex) in section.questions" :key="questionIndex" style="margin-bottom: 15px;">
							<p>{{ questionIndex+1+". "+ question.question }}</p>
							<a-radio-group
								v-model:value="selectedAnswers[sectionIndex][questionIndex]"
								@change="() => checkAnswer(sectionIndex)">
								<div v-for="(option, optionIndex) in question.options" :key="optionIndex" style="margin-left: 20px;">
									<a-radio :value="String.fromCharCode(65 + optionIndex)">
										{{ String.fromCharCode(65 + optionIndex) }}. {{ option }}
									</a-radio>
								</div>
							</a-radio-group>
						</div>
						<!-- 比对答案按钮 -->
						<a-button type="primary" @click="showAllCorrectAnswers(sectionIndex)">比对答案</a-button>
						<!-- 显示正确答案 -->
						<div v-if="showCorrectAnswers[sectionIndex]">
							<a-card>
								<h3>正确答案:</h3>
								<ul>
									<li v-for="(question, qIndex) in section.questions" :key="qIndex">
										{{ qIndex+1+". "+  String.fromCharCode(65 + question.correctAnswer.charCodeAt(0) - 'A'.charCodeAt(0)) }}
									</li>
								</ul>
							</a-card>
						</div>
					</div>
				</a-collapse-panel>
			</a-collapse>
		</a-card>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { bizWordStore } from "@/store/bizWordStore";
import bizWordArticleApi from "@/api/biz/bizWordArticleApi";

const sections = ref([]);
const selectedAnswers = ref([]);
const showCorrectAnswers = ref([]);
const wordStore = bizWordStore();

// 获取试题列表
const fetchTests = async (words, fastShotId) => {
	try {
		bizWordArticleApi.bizCet4WrdToArticleAndQuestions({
			words: words,
			fastShotId: fastShotId,
			articleNumber: 3
		}).then(res => {
			sections.value = res;
			selectedAnswers.value = sections.value.map(section =>
				Array(section.questions.length).fill('')
			);
			showCorrectAnswers.value = new Array(sections.value.length).fill(false);
		});
	} catch (error) {
		console.error('Failed to fetch tests:', error);
	}
};

// 检查答案
const checkAnswer = (index) => {
	// 可根据需求调整此方法逻辑
};

// 显示当前文章所有问题的正确答案
const showAllCorrectAnswers = (sectionIndex) => {
	showCorrectAnswers.value[sectionIndex] = !showCorrectAnswers.value[sectionIndex];
};

// 初始化时获取试题列表
onMounted(() => {
	let words = wordStore.getWords().wordList;
	let fastShotId = wordStore.getWords().fastShotId; // 如果fastShotId为null，则使用默认值"123"
	fetchTests(words, fastShotId);
});

// 监听sections变化以更新selectedAnswers
watch(sections, () => {
	selectedAnswers.value = sections.value.map(section =>
		Array(section.questions.length).fill('')
	);
}, { immediate: true });
</script>

<style scoped>
.test-page {
	padding: 20px;
}

.ant-card {
	background-color: #f7f7f7;
}

.ant-collapse-header {
	font-weight: bold;
}

.ant-collapse-content-box {
	padding: 10px;
}

.ant-radio-group {
	display: flex;
	flex-direction: column;
}

.ant-radio-button-wrapper {
	margin-bottom: 5px;
}

.ant-collapse-item {
	margin-bottom: 20px;
}

.ant-collapse-item:last-child {
	margin-bottom: 0;
}

.ant-collapse-header {
	font-size: 1.2em;
	border-bottom: 1px solid #e8e8e8;
}

.ant-collapse-content-box {
	background-color: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	padding: 10px;
}
</style>
